<template>
	<view class="">
		<view class="artistesBox" v-for="(item, index) in ArtisterList" :key="index">
			<view class="artInfos" @click="gotoArtiter(item.UserID)">
				<view class="artHeadPic">
					<head-wear :width="80" :height="80" :borderWidth="4" :userInfo="item" :WxHeadPic="item.WxHeadPic"
						:UserLevelID="item.UserLevelID" image-width="30" image-height="20" size="16" right="-7"
						bottom="0" oneRight="0"></head-wear>
				</view>
				<view class="artInfo">
					<view class="artName">
						<text class="one-ellipsis" style="display: block; max-width: 90%;">{{item.NickName}}</text>
						<image :src="baseUrl + 'icon/boy.png'" class="marginLeft-10 sex-image-size"
							v-if="JSON.parse(item.UserSex).text === '男'"></image>
						<image :src="baseUrl + 'icon/girl.png'" class="marginLeft-10 sex-image-size"
							v-if="JSON.parse(item.UserSex).text === '女'"></image>
						<auth-label v-if="item.isAuthOk == 2" :size="18" height="30"></auth-label>
						<personality-label v-if="item.BeautifulWomen == 1" :size="18" height="30"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="marginLeft-10 company-image-size"
							v-if="item.isCompanyAuth == 2">
						</image>
					</view>
					<view class="artLabel">
						<text v-if="item.Roles">
							<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
								{{ roleitem.LabelName }}
								<text v-if="roleindex < item.Roles.length-1">・</text>
							</text>
						</text>
						<text class="geline">|</text>
						<text class="artAddr">{{ item.UserCity }}</text>
					</view>
				</view>
				<view class="artState">
					<view style="font-size:24rpx;" v-if="item.isOnline == 1">在线</view>
					<view style="font-size:24rpx;" v-if="item.isOnline == 0">
						{{ $common.timeDiff(item.onlineTime,new Date()) }}来过
					</view>
					<view style="font-size:24rpx;" v-if="item.isOnline == 2">
						今日活跃
					</view>
				</view>
			</view>
			<view class="artPics" v-if="item.UserPhotos.length > 0">
				<view class="artPic" v-for="(itm, idx) in item.UserPhotos" :key="idx" v-if="idx < 3"
					@click="showPhoto(item.UserPhotos, idx)">
					<image :src="itm" mode="aspectFill"></image>
					<view class="" v-if="idx == 2" style="display: table-cell;vertical-align: middle;">
						<view class="artPicCount" v-if="item.UserPhotosCount > 3">
							<uni-icons type="image" size="14" color="#fff"></uni-icons>
							<text class="marginLeft-5">{{item.UserPhotosCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"

	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear
		},
		name: 'listBox',
		props: {
			ArtisterList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				baseUrl: '',
			}
		},
		created() {
			this.baseUrl = this.$baseUrl;
		},
		mounted() {

		},
		methods: {
			showPhoto(photos, index) {
				uni.previewImage({
					current: index,
					urls: photos,
					showmenu: true,
				})

			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}

	}
</script>

<style lang="scss">
	.scroll::-webkit-scrollbar {
		display: block;
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
	}

	.tabListBox {
		position: fixed;
		width: 100vw;
		z-index: 50;
		top: 0rpx;
		height: 96rpx;
		background-color: #FFF;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
	}

	.tabList {
		height: 96rpx;
		// 
	}

	.tabLabel {
		padding: 10rpx;
		padding-bottom: 0rpx;
	}

	.tabTopline {
		height: 96rpx;
	}

	.diline {
		border-bottom: 3rpx solid #666;
	}

	.searchBtn {
		width: 60rpx;
		text-align: center;
		background-color: #e0e0e0;
		color: #333;
		padding: 5rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		margin: 15rpx;
		margin-top: 30rpx;
		height: 35rpx;
		border-radius: 10rpx;
	}

	.artistes {
		padding: 20rpx
	}

	.artistesBox {
		margin-top: 20rpx;
		height: auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding: 26rpx;
		padding-bottom: 40rpx;

		&:first-child {
			margin-top: 96rpx;
		}
	}

	.artInfos {
		height: 60rpx;
	}

	.artHeadPic {
		position: relative;
		float: left;
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}

	.artHeadPic image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.artInfo {
		float: left;
		width: 60vw;
		margin-left: 20rpx;
	}

	.artName {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
	}

	.artLabel {
		font-size: 20rpx;
		color: #999;
		font-size: 20rpx;
		color: #999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.artState {
		width: 96rpx;
		float: right;
		text-align: right;
		color: #999
	}

	.geline {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.artAddr {}

	.artPics {
		clear: both;
		position: relative;
		display: flex;
		margin-top: 40rpx;
	}

	.artPic {
		width: 30vw;
		height: 270rpx;
		background-color: #e0e0e0;
		margin: 10rpx;
		position: relative;
		border-radius: 5rpx;
		overflow: hidden;
	}

	.artPic image {
		width: 100%;
		height: 270rpx;
		border-radius: 5rpx;
	}

	.artPicCount {
		position: absolute;
		z-index: 50;
		bottom: 0;
		right: 0;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 5rpx;
		font-size: 20rpx;
	}

	.popup {
		width: 100vw;
		height: 1400rpx;
		background-color: #FFF;
	}

	.popupTitle {
		padding: 20rpx;
	}

	.popupCity {
		padding: 20rpx;
		background: #f0f0f0;
	}

	.popupLabelBoxs {
		padding: 20rpx;
		padding-top: 0;
	}

	.popupFlex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.searchTitle {
		clear: both;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 20rpx;
		padding: 20rpx 0;
	}

	.searchTitle:first-child {
		padding-top: 0;
	}

	.searchLabel {
		width: calc((100% - 30rpx) /4);
		background-color: #f0f0f0;
		color: #666;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		text-align: center;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.searchLabel.sed {
		background-color: #FFDD00;
	}

	.popupBottom {
		position: absolute;
		z-index: 800;
		width: 100vw;
		bottom: 0rpx;
		height: 100rpx;
		border-top: 1rpx solid #e0e0e0;
		background-color: #fff;
	}

	.popupClearBtn {
		width: 35vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background: #e0e0e0;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}

	.popupSubmitBtn {
		width: 60vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		background-color: $globalColor;
		border: 0rpx;
		color: #000;
		margin: 10rpx;
	}

	.noneInfos {
		text-align: center;
		padding: 100rpx;
		color: #999
	}
</style>